<template>
  <div>
    <div class="filter-bar-query">
      <h2>新建告警指标</h2>
    </div>
    <el-row type="flex" justify="center" class="create-index-content">
      <el-col :span="18">
        <el-row type="flex" class="create-input-row">
          <el-col>
            <span class="create-index-label">指标名称</span>
            <el-input v-model="name" size="small" class="create-index-input" placeholder="请输入指标名称"></el-input>
          </el-col>
        </el-row>
        <el-row type="flex" class="create-input-row ">
          <el-col>
            <span class="create-index-label create-label-description">指标描述</span>
            <el-input v-model="name" type="textarea" size="small" class="create-index-input" placeholder="请输入指标描述"></el-input>
          </el-col>
        </el-row>
        <el-row type="flex" class="create-input-row">
          <el-col>
            <span class="create-index-label">指标编码</span>
            <el-input v-model="name" size="small" class="create-index-input" placeholder="请输入指标编码"></el-input>
          </el-col>
        </el-row>
        <el-row type="flex" class="create-input-row">
          <el-col>
            <span class="create-index-label">数据来源</span>
            <el-select v-model="sourceValue" class="create-index-input" size="small" placeholder="请选择数据来源">
              <el-option
                v-for="item in sourceData"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-col>
        </el-row>
        <el-row type="flex" class="create-input-row">
          <el-col>
            <span class="create-index-label">指标阈值</span>
            <el-input v-model="name" size="small" class="create-index-input create-input-threshold" placeholder="请输入指标阈值"></el-input>
            <span class="create-threshold-test">指标单位</span>
            <el-select v-model="thresholdValue" class="creare-threshold-unit" size="small" placeholder="请选择指标单位">
              <el-option
                v-for="item in thresholdData"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-col>
        </el-row>
        <el-row type="flex" class="create-input-row">
          <el-col>
            <span class="create-index-label">业务逻辑</span>
            <el-input v-model="name" size="small" class="create-index-input" placeholder="请输入业务逻辑"></el-input>
          </el-col>
        </el-row>
        <el-row type="flex" class="create-input-row">
          <el-col>
            <el-table :data="fieldData">
              <el-table-column prop="fieldName" label="字段名称">
                <template scope="scope">
                  <el-input v-model="scope.row.fieldName" size="small" placeholder="请输入字段名称"></el-input>
                </template>
              </el-table-column>
              <el-table-column prop="fieldCode" label="字段编码">
                <template scope="scope">
                  <el-input v-model="scope.row.fieldCode" size="small" placeholder="请输入字段编码"></el-input>
                </template>
              </el-table-column>
              <el-table-column prop="fieldDescription" label="字段描述">
                <template scope="scope">
                  <el-input v-model="scope.row.fieldDescription" size="small" placeholder="请输入字段描述"></el-input>
                </template>
              </el-table-column>
              <el-table-column prop="relation" label="关系">
              </el-table-column>
              <el-table-column prop="description" label="操作">
                <template scope="scope">
                  <el-popover
                      placement="top"
                      width="20"
                      trigger="click"
                      v-model="scope.row.logic"
                      >
                      <div style="text-align: center; margin: 0">
                        <el-button size="mini" type="text" @click.native="addField(scope.row, '并且')">并且</el-button>
                        <el-button type="text" size="mini"  @click.native="addField(scope.row, '或者')">或者</el-button>
                      </div>
                      <el-button type="text" size="small" slot="reference" v-show="scope.row.add">添加</el-button>
                    </el-popover>
                  <el-button type="text" size="small" v-show="!scope.row.add" @click="delField(scope.$index)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-col>
        </el-row>
        <el-row>
          <el-col>
            {{expression ? '映射表达式：' + expression : ''}}
          </el-col>
        </el-row>
        <el-row type="flex" justify="center" class="create-bottom-active">
          <el-button size="small" type="primary" @click="createIndex">创建</el-button>
          <el-button size="small" @click="indexCannel">取消</el-button>
        </el-row>
      </el-col>
    </el-row>
    <el-dialog
      title="提示"
      :visible.sync="delFieldVisible"
      size="tiny">
      <span>是否要删除当前信息</span>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="delFieldVisible = false">取 消</el-button>
        <el-button size="small" type="primary" @click="confrimDel">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
  import { Row, Col, Button, Table, TableColumn, Input, Select, Option, Popover, Message, Dialog } from 'element-ui'
  export default {
    methods: {
      confrimDel () {
        this.delFieldVisible = false
        this.fieldData.splice(this.index, 1)
      },
      createIndex () {
        this.$router.push('/alarm/alarm-index')
      },
      indexCannel () {
        this.$router.push('/alarm/alarm-index')
      },
      delField (index) {
        this.delFieldVisible = true
        this.index = index
      },
      addField (obj, relation) {
        obj.logic = false
        var _check = this._checkEmptyField(obj)
        if (_check) return
        this._pushFieldData()
        obj.relation = relation
        obj.add = false
      },
      _checkEmptyField (obj) {
        var flag = false
        for (let i in obj) {
          if (i == 'fieldDescription' || i == 'relation') {
            continue
          }
          if (obj[i] === '') {
            Message('名称， 编码不能为空')
            flag = true
          }
        }
        return flag
      },
      _pushFieldData () {
        this.fieldData.push(
          {
            fieldName: '',
            fieldCode: '',
            fieldDescription: '',
            logic: false,
            relation: '',
            add: true
          }
        )
      }
    },
    data () {
      return {
        index: '',
        delFieldVisible: false,
        expression: '',
        fieldName: '',
        fieldCode: '',
        fieldDescription: '',
        fieldData: [
          {
            fieldName: '',
            fieldCode: '',
            fieldDescription: '',
            logic: false,
            relation: '',
            add: true
          }
        ],
        name: '',
        sourceValue: '',
        sourceData: [
          {
            label: 'APM',
            value: 'APM'
          }
        ],
        thresholdData: [
          {
            label: '秒',
            value: 'ms'
          },
          {
            label: '分钟',
            value: 'min'
          },
          {
            label: '小时',
            value: 'hour'
          },
          {
            label: '%',
            value: '%'
          }
        ],
        thresholdValue: ''
      }
    },
    components: {
      'el-row': Row,
      'el-col': Col,
      'el-table': Table,
      'el-button': Button,
      'el-table-column': TableColumn,
      'el-input': Input,
      'el-select': Select,
      'el-option': Option,
      'el-popover': Popover,
      'el-dialog': Dialog
    }
  }
</script>
<style lang="scss" scoped>
  .filter-bar-query {
    height: 40px;
    padding: 0 10px;
    line-height: 30px;
    border-bottom: 1px solid #e5e5e5;
    h2 {
      font-weight: normal;
    }
  }
  .create-index-content {
    margin-top: 40px;
  }
  .create-index-input {
    width: 70%;
  }
  .create-index-label {
    margin-right: 15px;
  }
  .create-input-row {
    margin-bottom: 15px;
  }
  .create-label-description {
    position: relative;
    float: left;
    margin-right: 18px;
  }
  .create-input-threshold {
    width: 30%;
  }
  .creare-threshold-unit {
    width: 15%;
  }
  .create-threshold-test {
    margin: 0 15px;
  }
  .create-field-content {
    width: 75.5%;
  }
  .create-bottom-active {
    margin-top: 30px;
  }
</style>